<template>
  <!--头部-->
  <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">
    <div class="container">
      <router-link class="navbar-brand mx-auto" to="/fonHome">医院门诊电子病历管理系统</router-link>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
          <router-link class="nav-item nav-link active" to="/fonHome">首页 <span class="sr-only">(current)</span></router-link>
<!--          <router-link class="nav-item nav-link" to="/foDoctorIn">医生介绍</router-link>-->
          <router-link class="nav-item nav-link" to="/projectL">项目介绍</router-link>
          <router-link class="nav-item nav-link" to="/usIndex">个人中心</router-link>
          <el-dropdown-item  @click.native="logout" class="tuichu">
            <span>退出登录</span>
          </el-dropdown-item>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.css'

export default {
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    }
  }
}
</script>

<style scoped>
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
    justify-content: center; /* Flexbox utility class for centering */
    flex-grow: 1;
  }

  .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  /* 这是为了确保navbar-brand在大屏幕上也居中显示 */
  .navbar .navbar-collapse {
    justify-content: center;
  }
}
.tuichu{
  position: relative;
  right: -30em;
}
</style>
